<template>
  <!-- 侧边栏 -->
  <div class="side-menu">
    <el-menu
      router
      :unique-opened="true"
      :default-active="defaultActive"
      class="el-menu-vertical-demo"
      text-color="#000"
      active-text-color="#409EFF"
    >
      <template v-for="route in $router.options.routes" v-if="route.children && route.children.length">
        <template v-for="item in route.children" >
          <el-menu-item
            :key="route.path + '/' + item.path"
            :index="item.path"
          >
            <i :class="item.icon"></i>
            <span slot="title">{{ item.meta.title }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'SideMenu',
  data () {
    return {
      defaultActive: ''
    }
  },
  watch: {
    $route () {
      this.setCurrentRoute()
    }
  },
  methods: {
    setCurrentRoute () {
      this.defaultActive = this.$route.path;
      this.$store.state.title = this.$route.meta.title;
    }
  },
  created () {
    this.setCurrentRoute()
  },
}
</script>

<style scoped>

</style>
